<template>
  <div :class="props.containerClass">
    <!-- 内容 -->
    <div :class="props.contentClass">
      <el-empty v-if="dataSources.length === 0 && loading === false" />
      <slot
        v-else
        :list="dataSources"
        :loading="loading"
        :page-size="page.size"
      />
    </div>

    <!-- 分页 -->
    <div
      v-if="props.dataSourceMode === DataSourceMode.Loadmore"
      :class="{ 'mt-3.75rem': !isMobile, 'mt-1.25rem': isMobile }"
      @click="onLoadNext"
    >
      <load-more :status="loadStatus" :load-more-class="props.loadMoreClass" />
    </div>
    <div
      v-if="props.dataSourceMode === DataSourceMode.Pagination"
      class="flex items-center justify-between mt-1.25rem"
      :class="props.paginationClass"
    >
      <div class="_pagination-info _text-ellipsis">
        <span>Showing</span>
        <div class="_pagination-spacing">
          <span>{{ range.start }}</span>
          <span>-</span>
          <span>{{ range.end }}</span>
        </div>
        <span>of</span>
        <span>{{ totalNumber }}</span>
      </div>
      <div>
        <el-button
          class="_btn"
          type="info"
          :disabled="page.page === 1 || loading"
          @click="onLoadPrevious"
        >
          Previous
        </el-button>
        <el-button
          class="_btn"
          type="info"
          :disabled="
            page.page === Math.ceil(totalNumber / page.size) || loading
          "
          @click="onLoadNext"
        >
          Next
        </el-button>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup generic="T">
import { useMedia } from "@/hooks/useMedia";

import LoadMore from "../LoadMore/loadMore.vue";
import type { BasicTableEmits, BasicTableExpose } from "./basicTable";
import { basicTableProps, DataSourceMode } from "./basicTable";
import { useTable } from "./hooks/useTable";

const props = defineProps(basicTableProps);
const emits = defineEmits<BasicTableEmits<T>>();

const {
  loadStatus,
  loading,
  page,
  dataSources,
  totalNumber,
  getDatsSource,
  resetQuery,
} = useTable<T>(props, emits);
const isMobile = useMedia();

const range = computed(() => {
  const start = (page.value.page - 1) * page.value.size + 1;
  return {
    start: start,
    end:
      start + page.value.size > totalNumber.value
        ? totalNumber.value
        : start + page.value.size - 1,
  };
});

function onLoadPrevious() {
  page.value.page--;
  getDatsSource();
}

function onLoadNext() {
  page.value.page++;
  getDatsSource();
}

onBeforeMount(() => {
  if (props.isInitRequest) {
    getDatsSource();
  }
});

defineExpose<BasicTableExpose>({
  getDataSource: async () => {
    await getDatsSource();
  },
  resetQuery: async () => {
    await resetQuery();
  },
});
</script>

<style lang="less" scoped>
._pagination-spacing,
._pagination-info {
  @apply flex items-baseline;
  gap: 0.3rem;
}

._pagination-info {
  font-size: 0.88rem;
  line-height: 1rem;
}

:deep(._btn) {
  color: #cccccc;
  border: 0.06rem solid #cccccc;
  &.is-disabled {
    color: #545555;
    background-color: #272b2c;
    border: 0.06rem solid #545555;
  }
}
</style>
